<template >
    <div id="box">
        <!-- 中间的盒子 -->
        <div class="cons">
            <h2>在线教育网后台管理系统</h2>
            <!-- 输入框 -->
            <div class="inp">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">

                    <el-form-item  prop="email">
                        <el-input v-model="ruleForm.email" prefix-icon="el-icon-user-solid"></el-input>
                    </el-form-item>

                    <el-form-item  prop="password">
                        <el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" class="dlbtn" @click="submitForm('ruleForm')">登录</el-button>

                    </el-form-item>

                </el-form>

            </div>


            <!-- 注册  -->
            <div class="zc">
                您没有账户？<span class="check" @click="zc"> 点击注册</span>

            </div>
        </div>
    </div>
</template>
<script>

import { login } from "../api/api"
export default {
    data() {
        return {
            ruleForm: {
                email: "27732357@qq.com",
                password: "321321"
            },
            rules: {
                email: [
                    { required: true, message: '请填写邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                password: [
                    { required: true, message: '您需要输入密码', trigger: 'blur' },
                    { min: 5, max: 20, message: '长度在 3 到 6 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        zc() {
            this.$router.push('/regist')
        },

        // dl() {

        //     login(this.ruleForm).then((res) => {
        //         console.log(res);
        //     })
        // },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    login(this.ruleForm).then((res) => {
                        console.log(res);
                        if (res.success == true) {
                            localStorage.setItem("token", res.token)
                            this.$router.push("/home")
                        }
                        else {
                            alert("错误")
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },

    created() {


    },

}
</script>
<style lang="scss">
#box {
  
    background-color: #2d3a4b;
    height: 100vh;
    width: 100%;
  

}

.cons {

    width: 800px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    h2 {
       text-align: center;
        margin-bottom: 10px;
        color: #fff;
    }
}

.dlbtn {
    width: 800px;
   

}

.zc {
    width: 100%;
    text-align: right;
    color: #fff;
    margin-top: 15px;
}

.check {
    cursor: pointer
}
</style>